<template>
    <view style="padding-bottom: 14px">
        <!-- 通知栏 -->
        <view class="prompt" v-if="'待接单' == orderStatus && clock">
            <text class="prompt-content">
                美发师将在
                <text class="prompt-time">{{ clock }}</text>
                时间内接单, 超时订单将默认拒绝
            </text>
        </view>
        <view class="msg" v-if="orderStatus == '待接单' && time8 > 0">
            美发师将在
            <van-count-down :time="time8" format="mm 分 ss 秒" />
            内接单，超时订单将默认拒绝
        </view>
        <view class="order-container">
            <!-- 用户信息 -->
            <view class="order-info-container orderdetail-card">
                <view class="user-info">
                    <image class="headerimg" :src="orderDetail.userPath"></image>
                    <view class="user-info-detail">
                        <view class="user-info-detail-name">{{ orderDetail.userNickname }}</view>
                        <view class="user-info-detail-phone">{{ orderDetail.userMobile }}</view>
                    </view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'cut.png'" style="" />
                        <text class="sybtext1">服务美发师：</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ orderDetail.stylistname }}({{ stylistNexus }})</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'clock.png'" />
                        <text class="sybtext1">预计时间：</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-if="present == '当面付'">当面付</view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-else>{{ ordertimeStr }}{{ orderDetail.orderType == 1 ? '(在线排队)' : '(固定时间)' }}</view>
                </view>
            </view>

            <!-- 服务项目 -->
            <view class="service orderdetail-card start">
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'server.png'" />
                        <text class="sybtext1">服务项目:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-if="orderservices.length > 0">{{ orderservices }}</view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-else>{{ ordername }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'money.png'" />
                        <text class="sybtext1">项目金额:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">￥{{ orderDetail.orderamount }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint" v-if="orderDetail.couponamount">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="imgUrl + 'stepy.png'" />
                        <text class="sybtext1">优惠券:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-if="orderDetail.coupontype == 1">
                        ¥{{ orderDetail.couponamount ? orderDetail.couponamount : 0.0 }}元满减券
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right" v-if="orderDetail.coupontype == 2">
                        ¥{{ orderDetail.couponamount ? orderDetail.couponamount : 0.0 }}折折扣券
                    </view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint" v-if="orderDetail.cashAmount">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'coupon.png'" />
                        <text class="sybtext1">现金券:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ orderDetail.cashAmount }}元现金券</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint" v-if="mealName != 'undefined' && mealName">
                    <view class="order-detail-flex9">
                        <image class="shopicon mr-10" :src="imgUrl + 'stepy.png'" />
                        套餐券:
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ mealName }}({{ orderDetail.packagetype == 1 ? '单项套餐券' : '多项套餐券' }})</view>
                </view>

                <block v-if="orderDetail.orderSource == 2">
                    <view class="orderdetail-shopname-wrap user-apoint" v-if="orderDetail.additionalItem">
                        <view class="order-detail-flex9 centers">
                            <image class="shopicon" :src="shopimgUrl + 'server.png'" />
                            <text class="sybtext1">附加项：{{ orderDetail.additionalItem || '' }}</text>
                        </view>
                        <view class="order-detail-flex14 order-detail-text-align-right txt-red">¥{{ orderDetail.additionalAmount || 0.0 }}</view>
                    </view>
                    <view class="orderdetail-shopname-wrap user-apoint" v-if="orderDetail.discountAmount">
                        <view class="order-detail-flex9">
                            <image class="shopicon mr-10" :src="imgUrl + 'stepy.png'" />
                            折扣金额:
                        </view>
                        <view class="order-detail-flex14 order-detail-text-align-right txt-red">-¥{{ orderDetail.discountAmount || 0.0 }}</view>
                    </view>
                </block>
                <view class="order-detail-line"></view>

                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9">总价:</view>
                    <view class="order-detail-flex14 order-detail-text-align-right price">¥{{ orderDetail.payamount }}</view>
                </view>
            </view>

            <!-- 预约留言 -->
            <view class="service orderdetail-card">
                <view class="orderdetail-shopname-wrap user-apoint">
                    <image :src="imgUrl + 'leave.png'" class="shopicon remarkicon" />
                    <view class="order-detail-flex9">预约留言：</view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ orderDetail.remark ? orderDetail.remark : '暂无' }}</view>
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="service orderdetail-card">
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'order.png'" />
                        <text class="sybtext1">订单编号:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ orderDetail.orderno }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'clock.png'" />
                        <text class="sybtext1">创建时间:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ createtimeStr }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'clock.png'" />
                        <text class="sybtext1">支付时间:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ paytimeStr }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint" v-if="orderStatus === '已完成'">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'clock.png'" />
                        <text class="sybtext1">完成时间:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ endtimeStr }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint" v-if="orderDetail.servicemodel != 2">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'payway.png'" />
                        <text class="sybtext1">支付方式:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">
                        <text v-if="orderDetail.paytype == 'weixin' || orderDetail.paytype == 'wxappletpay'">微信支付</text>
                        <text v-if="orderDetail.paytype == 'blance'">余额支付</text>
                        <text v-if="orderDetail.paytype == 'cash'">现金支付</text>
                        <text v-if="orderDetail.paytype == 'storeBlance'">门店余额支付</text>
                        <text v-if="orderDetail.paytype == 'unionPay'">银联支付</text>
                        <text v-if="orderDetail.paytype == 'alipay'">支付宝支付</text>
                    </view>
                </view>
            </view>

            <!-- 退款信息 -->
            <view class="service orderdetail-card" v-if="orderDetail.orderRefund">
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'order.png'" />
                        <text class="sybtext1">关闭时间:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ canceltimeStr }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'clock.png'" />
                        <text class="sybtext1">关闭原因:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ orderDetail.refundReason }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'payclock.png'" />
                        <text class="sybtext1">退款时间:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">{{ refundtimeStr }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'money.png'" />
                        <text class="sybtext1">订单金额:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">¥{{ orderDetail.payamount }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'money.png'" />
                        <text class="sybtext1">违约金额:</text>
                        <image class="shopicon ml-10" src="/static/images/desc.png" @tap.stop.prevent="gotoWysm" />
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">￥{{ orderDetail.orderRefund.handlingfee }}</view>
                </view>
                <view class="orderdetail-shopname-wrap user-apoint">
                    <view class="order-detail-flex9 centers">
                        <image class="shopicon" :src="shopimgUrl + 'payclock.png'" />
                        <text class="sybtext1">退款金额:</text>
                    </view>
                    <view class="order-detail-flex14 order-detail-text-align-right">￥{{ orderDetail.orderRefund.refundamount }}</view>
                </view>
            </view>

            <view class="contact-container orderdetail-card" @tap="onMobile">
                <image class="orderdetail-call-client-icon" :src="shopimgUrl + 'phonecall.png'" />
                <text class="orderdetail-call-client">联系顾客</text>
            </view>
        </view>
        <view class="last-cross-line">
            <view
                class="accept-container1"
                v-if="leftbutton && lastbuttonflag"
                @tap.stop.prevent="chooseOption"
                :data-item="orderDetail"
                :data-name="leftbutton"
                :data-id="orderId"
            >
                <text class="accept">{{ leftbutton }}</text>
            </view>
            <view v-if="lastbutton && lastbuttonflag" class="accept-container" @tap.stop.prevent="chooseOption" :data-name="lastbutton" :data-id="orderId">
                <text class="accept">{{ lastbutton }}</text>
            </view>
        </view>
        <van-overlay :show="showoverlay" @click="onClickHide">
            <view class="overlaybox">
                <view class="overlaybox1" @tap.stop.prevent="goMobile">
                    {{ orderDetail.newUserMobile }}
                </view>
                <view class="overlaybox2" @tap.stop.prevent="onClickHide">取消</view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/orderdetail/orderdetail.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

import { getTime, regMobile, toDecimal2 } from '../../utils/util.js';
export default {
    data() {
        return {
            shopimgUrl: app.globalData.shopimgUrl,
            imgUrl: app.globalData.imgUrl,
            orderStatus: '',
            lastbuttonflag: false,
            lastbutton: '',
            leftbutton: '',
            refundflag: false,

            orderDetail: {
                userPath: '',
                userNickname: '',
                userMobile: '',
                stylistname: '',
                orderamount: '',
                couponamount: '',
                coupontype: 0,
                cashAmount: '',
                orderSource: 0,
                additionalItem: '',
                additionalAmount: '',
                discountAmount: '',
                payamount: '',
                orderno: '',
                servicemodel: 0,
                paytype: '',

                orderRefund: {
                    handlingfee: '',
                    refundamount: ''
                },

                refundReason: '',
                newUserMobile: ''
            },

            ordertimeStr: '',
            starttimeStr: '',
            canceltimeStr: '',
            refundtimeStr: '',
            paytimeStr: '',
            stylistNexus: '',
            orderId: '',
            showoverlay: false,
            orderservices: '',
            clock: '',
            time8: '',
            mealName: '',
            orderName: '',
            present: '',
            ordername: '',
            createtimeStr: '',
            endtimeStr: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        uni.setNavigationBarTitle({
            title: this.orderStatus
        });
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            let orderStatus = options.orderStatus;
            let orderId = options.orderId; // let orderName = options.orderName

            let mealName = options.mealName;
            this.setData({
                orderStatus: orderStatus,
                orderId: orderId,

                // orderName: orderName,
                mealName: mealName
            });

            if ('已完成' == orderStatus) {
                this.setData({
                    lastbutton: '查看评价',
                    lastbuttonflag: true
                });
                this.getOrderComment(orderId);
            } else if ('待接单' == orderStatus) {
                this.setData({
                    lastbutton: '接单',

                    // leftbutton: '拒绝',
                    lastbuttonflag: true
                });
            } else if ('待核销' == orderStatus) {
                this.setData({
                    // lastbutton: "接单",
                    // leftbutton: '取消订单',
                    lastbuttonflag: true
                });
            } else if ('已退款' == orderStatus) {
                this.setData({
                    // leftbutton:'删除订单',
                    lastbuttonflag: true
                });
            }

            this.queryOrderDetail(orderId);
        },

        // 显示电话
        onMobile(e) {
            this.setData({
                showoverlay: true
            });
        },

        // 拨打电话
        goMobile() {
            uni.makePhoneCall({
                phoneNumber: this.orderDetail.userMobile
            });
        },

        // 隐藏电话
        onClickHide() {
            this.setData({
                showoverlay: false
            });
        },

        // 获取评价
        getOrderComment(orderId) {
            _request
                .get('/storeComment/getOrderComment', {
                    orderId: orderId
                })
                .then((res) => {
                    if (res.data.data) {
                        this.setData({
                            lastbuttonflag: true
                        });
                    } else {
                        this.setData({
                            lastbuttonflag: false
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                    this.setData({
                        lastbuttonflag: false
                    });
                });
        },

        queryOrderDetail(orderId) {
            _request
                .get('/order/getOrder', {
                    orderId: orderId
                })
                .then((res) => {
                    if (res.data.data != null) {
                        if (this.orderStatus == '待接单') {
                            //  0 平台 1 店内
                            if (res.data.data.nexus == 0) {
                                this.setData({
                                    lastbutton: '提醒接单',
                                    // leftbutton: '拒绝',
                                    lastbuttonflag: true
                                });
                            } else {
                                this.setData({
                                    lastbutton: '接单',
                                    // leftbutton: '拒绝',
                                    lastbuttonflag: true
                                });
                            }
                        }

                        let data = res.data.data || {};
                        data.payamount = (data.payamount || 0).toFixed(2);
                        data.orderamount = (data.orderamount || 0).toFixed(2);

                        if (data.userMobile != null) {
                            data.newUserMobile = regMobile(data.userMobile);
                        } else {
                            data.newUserMobile = '';
                        }

                        if (data.orderRefund) {
                            data.orderRefund.handlingfee = (data.orderRefund.handlingfee || 0).toFixed(2);
                            data.orderRefund.refundamount = (data.orderRefund.refundamount || 0).toFixed(2);
                        }

                        var orderservices = '';

                        if (data.option) {
                            for (var index in data.option) {
                                orderservices = orderservices + data.option[index].serviceName + '￥' + data.option[index].price + ' | ';
                            }
                        }

                        if (res.data.data.pendingTime != null) {
                            var sDataTime = res.data.data.pendingTime; //获取订单失效的时间戳

                            var nowTime = new Date().getTime(); //获取系统当前时间戳

                            var _time = sDataTime * 1000 - nowTime; //下单以后剩余的时间

                            this.count_down(_time);
                        }

                        orderservices = orderservices.slice(0, orderservices.length - 3);
                        console.log(orderservices);
                        let name = data.ordername;
                        let names = name.indexOf('#');
                        let newName;

                        if (names != -1) {
                            newName = name.substring(0, names); // 服务项目
                        } else {
                            newName = name;
                        }

                        let present = data.ordername.slice(0, 3);
                        this.setData({
                            orderDetail: data,
                            ordername: newName,
                            present: present,
                            ordertimeStr: this.getYMDHMS(res.data.data.ordertime),
                            starttimeStr: this.getYMDHMS(res.data.data.starttime),
                            createtimeStr: this.getYMDHMS(res.data.data.createtime),
                            paytimeStr: this.getYMDHMS(res.data.data.paytime),
                            endtimeStr: this.getYMDHMS(res.data.data.endtime),
                            canceltimeStr: this.getYMDHMS(res.data.data.canceltime),
                            refundtimeStr: this.getYMDHMS(res.data.data.refundtime),
                            stylistNexus: res.data.data.nexus == 0 ? '网约' : '店内',
                            orderservices: orderservices,
                            time8: this.getCountdown(this.orderStatus, res.data.data.paytime)
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 获取倒计时
        getCountdown(status, time) {
            // 半小时的倒计时
            let nowtime = new Date().getTime();
            let countdown = 0.5 * 60 * 60 * 1000;

            if (status == '待接单') {
                // 待接单倒计时逻辑，付款时间 + 30分钟 - 现在时间
                countdown = countdown + time - nowtime;
            }

            return countdown;
        },

        date_format(micro_second) {
            var second = Math.floor(micro_second / 1000); // 秒数

            var hr = Math.floor(second / 3600); // 小时位

            var min = this.fill_zero_prefix(Math.floor((second - hr * 3600) / 60)); // 分钟位

            var sec = this.fill_zero_prefix(second - hr * 3600 - min * 60); // 秒位

            return min + ':' + sec;
        },

        // 位数不足补零
        fill_zero_prefix(num) {
            return num < 10 ? '0' + num : num;
        },

        // 点击查看评价，或者接单按钮
        chooseOption() {
            let vm = this;

            if ('已完成' == this.orderStatus) {
                uni.navigateTo({
                    url: '/pages/commentdetail/commentdetail?orderId=' + this.orderId
                });
            } else if ('接单' == this.lastbutton) {
                _request
                    .get('/stylistOrder/acceptOrder', {
                        orderId: this.orderId
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '接单成功',
                                icon: 'success',
                                duration: 2000
                            });
                            let options = {
                                orderStatus: '待核销',
                                orderId: vm.orderId
                            };
                            uni.setNavigationBarTitle({
                                title: '待核销'
                            });
                            vm.setData({
                                lastbutton: ''
                            });
                            vm.onLoadClone3389(options, {});
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'error',
                                duration: 2000
                            });
                        }
                    });
            } else if ('接单' == this.lastbutton) {
                _request
                    .get('/stylistOrder/acceptOrder', {
                        orderId: this.orderId
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '接单成功',
                                icon: 'success',
                                duration: 2000
                            });
                            let options = {
                                orderStatus: '待核销',
                                orderId: vm.orderId
                            };
                            uni.setNavigationBarTitle({
                                title: '待核销'
                            });
                            vm.setData({
                                lastbutton: ''
                            });
                            vm.onLoadClone3389(options, {});
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
            } else if ('接单' == this.lastbutton) {
                _request
                    .get('/stylistOrder/acceptOrder', {
                        orderId: this.orderId
                    })
                    .then((res) => {
                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '接单成功',
                                icon: 'success',
                                duration: 2000
                            });
                            let options = {
                                orderStatus: '待核销',
                                orderId: vm.orderId
                            };
                            uni.setNavigationBarTitle({
                                title: '待核销'
                            });
                            vm.setData({
                                lastbutton: ''
                            });
                            vm.onLoadClone3389(options, {});
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'error',
                                duration: 2000
                            });
                        }
                    });
            } else if ('提醒接单' == this.lastbutton) {
                _request
                    .get('/order/remindStylist', {
                        orderId: this.orderId,
                        status: '1'
                    })
                    .then((res) => {
                        uni.showToast({
                            title: '提醒成功',
                            icon: 'success',
                            duration: 2000
                        });

                        if (res.data.code === 200) {
                            vm.onLoadClone3389(options, {});
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    });
            }
        },

        getYMDHMS(timestamp) {
            if (!timestamp) {
                return '';
            }

            let time = new Date(timestamp);
            let year = time.getFullYear();
            let month = time.getMonth() + 1;
            let date = time.getDate();
            let hours = time.getHours();
            let minute = time.getMinutes();
            let second = time.getSeconds();

            if (month < 10) {
                month = '0' + month;
            }

            if (date < 10) {
                date = '0' + date;
            }

            if (hours < 10) {
                hours = '0' + hours;
            }

            if (minute < 10) {
                minute = '0' + minute;
            }

            if (second < 10) {
                second = '0' + second;
            }

            return year + '-' + month + '-' + date + ' ' + hours + ':' + minute;
        },

        gotoWysm() {
            uni.navigateTo({
                url: '/pages/orderdetail/wysm'
            });
        }
    }
};
</script>
<style>
.order-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 提示付款 */
.msg {
    width: 100%;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff1b0b;
    line-height: 34rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
}

.van-count-down {
    font-size: 24rpx !important;
    font-family: PingFangSC-Regular, PingFang SC !important;
    font-weight: 400 !important;
    color: #ff1b0b !important;
    line-height: 34rpx !important;
}

/* 提示语 */
.prompt {
    font-size: 24rpx;
    color: #666666;
    padding: 15rpx 0;
}

.prompt-time {
    color: #ff1b0b;
    font-weight: 700;
}

.prompt-content {
    display: flex;
    justify-content: center;
}

.order-info-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    justify-content: space-between;
}

.orderdetail-card {
    width: 96%;
    border-radius: 5px;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 2% auto;
}

.user-info {
    display: flex;
    flex-direction: row;
}

.user-info-detail {
    margin-left: 40rpx;
}

.user-info-detail-name {
    font-weight: 700;
}

.user-info-detail-phone {
    color: #666;
}

.shopicon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}

.user-apoint {
    margin: 10rpx;
    font-size: 28rpx;
}

.start .orderdetail-shopname-wrap:nth-child(1n) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.user-apoint:nth-child(1n) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.orderdetail-shopname-wrap {
    display: flex;
    flex-direction: row;
}

.order-detail-flex9 {
    flex: 9;
}

.order-detail-flex14 {
    flex: 14;
}

.order-detail-line {
    height: 1rpx;
    width: 96%;
    margin: 0 auto;
    background-color: #f5f5f5;
}

.order-detail-text-align-right {
    text-align: right;
    color: #999999;
    font-size: 28rpx;
}

/* 头像 */
.headerimg {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
}

/* 预约项目 */
.apoint-content {
    font-size: 28rpx;
    margin-left: 60rpx;
    margin-top: 10rpx;
}

.price-detail {
    margin-top: 8rpx;
    font-size: 28rpx;
}

.apont-price {
    float: right;
    font-size: 24rpx;
}

.total-price {
    float: right;
    font-size: 32rpx;
    font-weight: bold;
}

/* 分割线 */
.cross-line {
    margin-top: 10rpx;
    border: 0.1rpx solid rgb(214, 202, 202);
}

.service {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    display: flex;
    justify-content: space-between;
}

.icon {
    width: 45rpx;
    height: 45rpx;
}

.icon-time {
    width: 32rpx;
    height: 32rpx;
}

.apoint-message {
    font-size: 28rpx;
}

.message {
    float: right;
}

/* 订单信息 */
.order-info {
    margin-top: 10rpx;
    font-size: 28rpx;
}

/* 联系顾客 */
.contact-container {
    text-align: center;
    align-items: center;
    background: #ffffff;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.contact {
    font-size: 32rpx;
    color: black;
    line-height: 80rpx;
    font-weight: bold;
}

.last-cross-line {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* margin-top: 20rpx; */
}

/* 接单按钮 */
.accept-container {
    display: flex;
    /* float: right; */
    width: 200rpx;
    height: 68rpx;
    border-radius: 20px;
    text-align: center;
    margin-top: 30rpx;
    margin-right: 30rpx;
    align-items: center;
    justify-content: center;
    background-color: orange;
    margin-bottom: 20rpx;
}

.accept-container1 {
    display: flex;
    /* float: right; */
    width: 200rpx;
    height: 68rpx;
    border-radius: 20px;
    text-align: center;
    margin-top: 30rpx;
    margin-right: 30rpx;
    align-items: center;
    justify-content: center;
    background-color: #d1d1d1;
    margin-bottom: 20rpx;
}

.accept {
    font-size: 32rpx;
    color: white;
    line-height: 40rpx;
    font-weight: bold;
}

.orderdetail-call-client-icon {
    width: 60rpx;
    height: 60rpx;
    padding-top: 10rpx;
    display: inline-block;
}

.orderdetail-call-client {
    margin-left: 50rpx;
    line-height: 80rpx;
    text-align: center;
    padding-top: -10rpx;
}

.price {
    color: #ff1b0b;
    font-size: 32rpx;
    font-weight: 700;
}

/* 底部电话弹窗 */

.overlaybox {
    position: absolute;
    bottom: 50rpx;
    padding: 0 20rpx;
}

.overlaybox1 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
}

/* .centers{
  margin-top: 25rpx;
} */
.remarkicon {
    margin-top: 5rpx;
}
.txt-red {
    color: red;
}
</style>
